<template>
  <div class="orderDetail">
    <el-form ref="form" :data="form" :label-width="formLabelWidth">

      <el-form-item label="订单号">
        <el-input v-model="form.order_id"/>
      </el-form-item>

      <el-form-item label="订单地址">
        收货姓名: {{form.address.name}}<br>
        手机号: {{form.address.phone}}<br>
        地址: {{form.address.address}}<br>
        具体地址: {{form.address.address_detail}}
      </el-form-item>

      <el-form-item label="商品背景图">
        <img :src="form.product.image_url" width="200" height="200" />
      </el-form-item>

      <el-form-item label="商品名称">
        <el-input v-model="form.product.name"/>
      </el-form-item>

      <el-form-item label="商品价格">
        <el-input v-model="form.product.price"/>
      </el-form-item>

      <el-form-item label="商品种类">
        <el-select v-model="form.product.category_detail_id">
          <el-option v-for="(category, index) in categoryDetail" :key="index" :label="category.label" :value="category.value"/>
        </el-select> 
      </el-form-item>

      <el-form-item label="商品数量">
        <el-input v-model="form.count"/>
      </el-form-item>

      <el-form-item label="总额">
        <el-input v-model="form.total"/>
      </el-form-item>

      <el-form-item label="订单状态">
        <el-input v-model="form.status"/>
      </el-form-item>

      <el-form-item>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import orderApi from '@/api/order.js'
import categoryDetailApi from '@/api/categoryDetail'
export default {
  data() {
    return {
      dialogVisible: false,
      formLabelWidth: 100 + 'px',
      form: {},
      categoryDetail: []
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    }
  },
  created() {
    this.getCategoryDetails()
    this.getOrderById()
  },
  methods: {
    // 根据id获取订单
    async getOrderById() {
      const result = await orderApi.getOrderById(this.id)
      this.form = result.data[0]
      this.checkStatus(this.form.status)
    },
    checkStatus(status) {
      if(status == 0) {
        this.form.status = '待付款'
      }else if(status == 1) {
        this.form.status = '待收货'
      }else if(status == 2) {
        this.form.status = '已完成'
      }else if(status == 3) {
        this.form.status = '已取消'
      }
    },
    // 获取商品类别明细
    async getCategoryDetails() {
      const query = {
        page: 0,
        limit: 9999
      }
      const result = await categoryDetailApi.getCategoryDetails(query)
      result.data.rows.forEach(value => {
        const obj = {
          label: value.name,
          value: value.id
        }
        this.categoryDetail.push(obj)
      })
    },
    // 返回
    goBack() {
      this.$router.go(-1)
    },
  },
  inject: ['reload']
}
</script>
<style lang="less" scoped>
  .orderDetail {
    margin-top: 20px;
    .el-input, .el-select {
      width: 160px;
    }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
